<template>
  <div
    class="flex flex-column no-event-parent widget-panel-ui"
    :class="direction"
  >
    <div class="flex" :class="direction">
      <div
        class="left-icon align-center flex mrb18 mrr18 pointer title-bg"
        @click="leftClick"
        v-if="leftIconShow"
      >
        <el-image :src="leftActive ? upImg : downImg"></el-image>
      </div>
      <div class="flex-column flex">
        <div
          class="widget-panel-title no-select flex align-center color-white relative"
          :style="{ width: titleWidth }"
          v-show="showTitle"
        >
          <b class="absolute entitle">{{ enUpTitle }}</b>
          <span class="title-2">{{ title }}</span>
          <slot name="title"></slot>
          <span
            :class="icon"
            @click="$emit('iconClick')"
            class="right-icon absolute"
          />
        </div>
      </div>
    </div>
    <div class="flex" :class="direction">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "WidgetPanel",

  props: {
    title: {
      type: String,
      default: "标题"
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    enTitle: {
      type: String,
      default: "En"
    },
    icon: {
      type: String,
      default: ""
    },
    direction: {
      type: String,
      default: "left"
    },
    titleWidth: {
      type: String,
      default: ""
    },
    leftIconShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      upImg: require("@/assets/images/icon_up.png"),
      downImg: require("@/assets/images/icon_down.png"),
      leftActive: false
    };
  },
  computed: {
    enUpTitle() {
      return this.enTitle.toUpperCase();
    }
  },
  methods: {
    leftClick() {
      this.leftActive = !this.leftActive;
      this.$emit("leftClick", this.leftActive);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/backgrounds.scss";
.right {
  justify-content: flex-end;
}
.widget-panel-ui {
  display: flex;
  box-sizing: border-box;
  margin-bottom: 18px;

  .title-bg {
    width: 24px;
    height: 24px;
  }
  &.right {
    justify-content: flex-end;
  }
  .widget-panel-title {
    padding: 6px 8px;
    // width: 350px;
    width: 278px;
    height: 60px;
    margin-bottom: 18px;
    padding-left: 70px;
    span {
      font-size: 20px;
    }
    .title-2 {
      left: 76px;
      top: 20px;
      z-index: 1;
    }
    .entitle {
      font-size: 10px;
      left: 74px;
      top: 34px;
      z-index: 0;
      color: rgba(33, 46, 69, 0.8);
      filter: blur(1px);
      opacity: 0.5;
      text-shadow: 0 0 10px rgba(33, 46, 69, 0.8);
    }
    .right-icon {
      right: 16px;
      top: 16px;
      font-weight: bold;
      z-index: 0;
      color: $active;
    }
  }

  &.left .widget-panel-title {
    background: url("/fabu-admin/uiImgs/right.png") no-repeat;
    background-size: 100% 100%;
    span {
      margin-right: 8px;
    }
  }
  &.top {
    .widget-panel-title {
      justify-content: center;
    }
  }
  &.right .widget-panel-title {
    background: url("/fabu-admin/uiImgs/left.png") no-repeat;
    background-size: 100% 100%;
    span {
      margin-right: 8px;
    }
  }
  &.party-left .widget-panel-title {
    background: url("/fabu-admin/uiImgs/party_right.png") no-repeat;
    background-size: 100% 100%;
    span {
      margin-right: 8px;
    }
  }
  &.party-right .widget-panel-title {
    background: url("/fabu-admin/uiImgs/party_left.png") no-repeat;
    background-size: 100% 100%;
    span {
      margin-right: 8px;
    }
  }
}
</style>
